import { forwardRef, useEffect, useState } from "react";

const Character = forwardRef(
	(
		{
			onPositionChange,
			isFainted,
			canMove,
			initPositionX,
			initPositionY,
			characterImages,
			characterImage,
			onCharacterClick,
			ifProtagonist,
		},
		ref
	) => {
		// 在适当的位置定义人物的位置状态
		const [characterPositionX, setCharacterPositionX] =
			useState(initPositionX);
		const [characterPositionY, setCharacterPositionY] =
			useState(initPositionY);
		const [characterDirection, setCharacterDirection] = useState();
		const [characterStep, setCharacterStep] = useState(0);

		const [keyHoldTimer, setKeyHoldTimer] = useState(null);

		let characterImageSrc;
		if (characterImages && characterDirection in characterImages) {
			characterImageSrc =
				characterImages[characterDirection][characterStep];
		} else {
			characterImageSrc = characterImage; // 默认图片路径
		}
		const handleKeyDown = event => {
			if (!keyHoldTimer && canMove) {
				// 如果此前并未有定时器操作
				switch (event.key) {
					case "ArrowUp":
						setKeyHoldTimer(
							setInterval(() => {
								setCharacterPositionY(prev => prev - 10);
								setCharacterDirection("back");
								setCharacterStep(prev => (prev + 1) % 4);
							}, 100)
						);
						break;
					case "ArrowDown":
						setKeyHoldTimer(
							setInterval(() => {
								setCharacterPositionY(prev => prev + 10);
								setCharacterDirection("front");
								setCharacterStep(prev => (prev + 1) % 4);
							}, 100)
						);
						break;
					case "ArrowLeft":
						setKeyHoldTimer(
							setInterval(() => {
								setCharacterPositionX(prev => prev - 10);
								setCharacterDirection("left");
								setCharacterStep(prev => (prev + 1) % 4);
							}, 100)
						);
						break;
					case "ArrowRight":
						setKeyHoldTimer(
							setInterval(() => {
								setCharacterPositionX(prev => prev + 10);
								setCharacterDirection("right");
								setCharacterStep(prev => (prev + 1) % 4);
							}, 100)
						);
						break;
					default:
					// do nothing
				}
			}
		};
		const handleKeyUp = event => {
			// 当用户松开键时，我们清除定时器
			switch (event.key) {
				case "ArrowUp":
				case "ArrowDown":
				case "ArrowLeft":
				case "ArrowRight":
					if (keyHoldTimer) {
						clearInterval(keyHoldTimer); // 清除定时器
						setKeyHoldTimer(null); // 指示当前无定时器操作
						break;
					}

				default:
				// do nothing
			}
		};

		useEffect(() => {
			if (canMove) {
				// 假设更新了位置之后
				const newPosition = {
					x: characterPositionX,
					y: characterPositionY,
				};

				onPositionChange && onPositionChange(newPosition);
			}

			window.addEventListener("keydown", handleKeyDown);
			window.addEventListener("keyup", handleKeyUp);

			return () => {
				window.removeEventListener("keydown", handleKeyDown);
				window.removeEventListener("keyup", handleKeyUp);
			};
		}, [
			characterPositionX,
			characterPositionY,
			handleKeyDown,
			handleKeyUp,
			characterDirection,
			characterStep,
		]);

		return (
			<img
				ref={ref}
				src={characterImageSrc}
				alt="Character"
				className={`character ${isFainted ? "fainted" : ""}`}
				step={characterStep}
				canMove={canMove ? "true" : "false"}
				onClick={onCharacterClick}
				style={{
					left: `${characterPositionX}px`,
					top: `${characterPositionY}px`,
					zIndex: ifProtagonist ? "600" : "500",
					position: "absolute",
				}}
			/>
		);
	}
);

export default Character;
